<template>
    <view class="page_main">
        <HeaderBar :title="dataObj.name"></HeaderBar>
        <view class="card">
            <view class="title">{{ dataObj.name || '--'}}</view>
            <view class="text">{{ dataObj.company || '--'}}</view>
            <view class="tags">
                <view class="tag" v-for="(item,index) in dataObj.tags" :key="index">{{ item.name ||'--' }}</view>
            </view>
            <button class="contact" @click="handleCallPhone">
                <i class="iconfont icon-kefu" ></i>
                联系我们
            </button>         
        </view>
        <view class="container">
            <wd-tabs v-model="tab">
                <block v-for="(item,index) in tabs" :key="index">
                    <wd-tab :title="item.label" :name="item.label">
                    <view v-if="item.key === 0" class="content">
                        <view class="list" v-for="(item,index) in list" :key="index" @click="orderCreated(item)">
                            <image class="img" :src="item.headImageUrl" alt=""/>
                            <view class="info">
                                <view class="name">{{ item.name || '--'}}</view>
                                <view class="describe">{{ item.memo || '--'}}</view>
                                <view class="price">
                                    ￥
                                    <view class="num">{{ item.productPrice ||0 }}</view>
                                    起
                                </view>
                            </view>
                        </view>
                    </view>
                    <view v-else class="content">
                        <view class="intro">
                            <image class="img" :src="dataObj.blImageUrl" alt=""/>
                        </view>
                    </view>
                    </wd-tab>
                </block>
            </wd-tabs>
        </view>     
    </view>
</template>

<script setup>
import HeaderBar from "@/components/HeaderBar/index.vue";
import {onLoad} from "@dcloudio/uni-app";
import { queryTravel, queryTravelProduct} from "@/premiumRouteSubPack/api/index";
import { ref, onMounted } from "vue";

const dataObj =ref({})
// const btnList =ref([
//     {label:'高端定制游'},
//     {label:'商务游'},
//     {label:'亲子游'},
// ])
const tabs = ref([
    {label:'全部产品',key:0},
    {label:'企业介绍',key:1},
])
const tab = ref(0)
const list =ref([])
const intro =ref('企业简介')

const id = ref(null);
const merchantId = ref(null);

onLoad((option) => {
    // 获取页面跳转时传递的参数
    id.value = option.id;
    merchantId.value = option.merchantId;

    // // 调用后端接口
    getTravel(id);
	getTravelProduct(id);
});
// onMounted(() => {    
// 	getTravel();
// 	getTravelProduct();
// })

const getTravel = async (id)=>{
    try{
        const {result} = await queryTravel(id);
        dataObj.value = result;
    }catch(error){
        console.error("接口调用失败：", error);
    }
}
// 调用后端接口
const getTravelProduct = async (id) => {
  try {
    const {result} = await queryTravelProduct(id);
      list.value.push(...result);
  } catch (error) {
    console.error("接口调用失败：", error);
  }
}
// const handleLoadMore =()=>{
// 	if (hasMore.value) {
// 		getByPageInfo();
// 	}
// }
const orderCreated =(e)=>{
    const url = `/premiumRouteSubPack/pages/orderConfig/index?id=${e.id}&price=${e.productPrice}&merchantId=${merchantId.value}`;
    uni.navigateTo({
        url: url
    });
}
//联系我们
const handleCallPhone = () => {
    uni.makePhoneCall({
      phoneNumber: dataObj.value.contactMobile
    })
  };
</script>

<style lang="scss" scoped>
.page_main{
    height: 100vh;
    background: #eeefe7;
    display: flex;
    flex-direction: column;
    .card{
        padding: 70rpx 28rpx 45rpx;
        background: #fff;
        border-radius: 10rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        .title{
            font-size: 42rpx;
            font-weight: bold;
            color: #2b2b24;
        }
        .text{
            font-size: 30rpx;
            margin-top: 20rpx;
        }
        .tags{
            display: flex;
            align-items: center;
            // justify-content: space-around;
            justify-content: center;
            width: 100%;
            margin-top: 34rpx;
            .tag{
                width: auto;
                text-align: center;
                padding: 0 20rpx;
                height: 56rpx;
                color: #2b2b24;
                background: #eeefe7;
                border-radius: 10rpx;
                font-size: 25rpx;
                line-height: 56rpx;
                margin-right: 32rpx;
                &:last-child{
                    margin-right: 0;
                }
            }
        }
        .contact{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 250rpx;
            height: 70rpx;
            border-radius: 10rpx;
            border: 1rpx solid #1B9C61;
            background: #fff;
            font-size: 30rpx;
            margin-top: 40rpx;
            .icon-kefu{
                font-size: 30rpx;
                color: #1B9C61;
                margin-right: 10rpx;
            }
        }
    }
    .container{
        margin-top: 25rpx;
        background: #fff;
        border-radius: 10rpx;
        flex: 1;
        padding: 28rpx;
        :deep(.wd-tabs){
            .wd-tabs__nav-item{
                .wd-tabs__nav-item-text{
                    font-size: 32rpx;
                }
            }
            .wd-tabs__line{
                background: #1B9C61;
                width: 60rpx;
            }
            .is-active{
                .wd-tabs__nav-item-text{
                    color: #1B9C61;
                }
            }
        }
        .content{
            border-radius: 10rpx;
            margin-top: 20rpx;
            .list{
                display: flex;
                padding: 20rpx;
                background: #eeefe7;
                border-radius: 10rpx;
                margin-bottom: 27rpx;
                .img{
                    width: 180rpx;
                    height: 180rpx;
                    border-radius: 10rpx;
                    margin-right: 20rpx;
                }
                .info{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    flex: 1;
                    .name{
                        font-size: 30rpx;
                        font-weight: bold;
                        color: #2b2b24;
                    }
                    .describe{
                        font-size: 25rpx;
                    }
                    .price{
                    display: flex;
                    align-items: flex-end;
                    white-space: nowrap;
                    color: #AA5414;
                    font-size: 22rpx;
                    justify-content: flex-end;
                    .num{
                        font-size: 36rpx;
                        font-weight: bold;
                    }
                }
                }
            }
            .intro{
                padding: 20rpx;
                background: #eeefe7;
                .img{
                    width: 100%;
                    height: 400rpx;
                }
            }
        }

    }
}
</style>